<div class="panel-body table-responsive">
    <div class="alert alert-info osr-alert osr-alert-warning">
         <button data-dismiss="alert" class="close close-sm" type="button">
             <i class="fa fa-times"></i>
         </button>
        <div v-if="confs" class="osr-remind-alert">
            <i class="fa fa-bell-o osr-color-warning" >{{_("提示")}}:</i><br>
               <i class="fa fa-exclamation-circle"></i>
            {{_("请了解插件各设置项作用后, 再做更改, 错误的设置可能导致本插件功能不起作用!")}}<br>
               <i class="fa fa-exclamation-circle"></i>
            {{_("如果插件包配置代码有做修改, 请刷新配置后, 插件包中的新设置项才会生效, 并在此设置页面显示")}}<br>
            <i class="fa fa-circle osr-color-danger"></i> {{_("修改后需要重新激活插件生效")}}
            &nbsp;<i class="fa fa-circle-o osr-color-success"></i> {{_("修改后直接生效")}}
        </div>
        <div v-else class="osr-remind-alert">
            <i class="fa fa-bell-o osr-color-warning" >{{_("提示")}}:</i><br>
               <i class="fa fa-exclamation-circle"></i>
            {{_("本插件无配置项!")}}<br>
        </div>
    </div>

    <div id="libraries" v-if="confs" class="form-group-sm">
        <button v-on:click="refresh_conf()"  class="btn btn-sm osr-btn btn-info">
             <i class="fa fa-refresh"></i> {{_("刷新配置")}}
         </button>
    </div>

    <table class="table table-hover">
        <thead>
            <tr>
              <th>{{_("变量(key)")}}</th>
                <th>{{_("当前值")}}</th>
                <th>{{_("类型")}}</th>
                <th>{{_("重新激活")}}</th>
                <th>{{_("作用&说明")}}</th>
                <th>{{_("更新时间")}}</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
              <tr v-for="(conf, index) in confs">
                  <td width="150px">
                      {[conf.key]}
                  </td>

                  <!--编辑区域-->
                  <!--bool值-->
                  <td width="300px" v-if="conf.value_type=='bool'" class="form-group">
                    <select v-bind:id="conf._id" v-bind:name="conf._id"  class="input-sm form-control" >
                        <option v-if="conf.value" selected = "selected"  value="1">{{_("是")}}</option>
                        <option v-else  value="1">{{_("是")}}</option>

                        <option v-if="!conf.value" selected = "selected"  value="0">{{_("否")}}</option>
                        <option v-else   value="0">{{_("否")}}</option>
                    </select>
                  </td>
                  <!--密码-->
                  <td width="300px" v-if="conf.value_type=='password'" class="form-group" >
                        <input class="form-control osr-input" type="password"  v-model="conf.value">
                  </td>
                  <!--数组-->
                  <td width="300px" :id="'list_'+conf.key" width="300px" v-if="conf.value_type=='list'" class="form-group" >
                     <p>
                      <button v-on:click="add_input_tag(conf.key)" class="btn btn-sm osr-btn btn-success">
                         {{_("添加元素")}}
                     </button>
                      </p>
                      <div :id="conf.key+'_input_'+index" v-for="v,index in conf.value"
                           class="form-group">
                          <input  class="form-control osr-input" type="text" :value="v" />
                          <i v-on:click="remove_tag(conf.key+'_input_'+index)" class="fa fa-sm osr-pointer osr-color-danger fa fa-close pull-right osr-form-control-feedback">
                            </i>
                      </div>

                  </td>
                    <!--dict-->
                  <td width="300px" :id="'dict_'+conf.key" width="300px" v-if="conf.value_type=='dict'" class="form-group" >
                     <p>
                      <button v-on:click="add_dict_tag(conf.key)" class="btn btn-sm osr-btn btn-success">
                         {{_("添加元素")}}
                     </button>
                      </p>
                      <data :id="conf.key+'_add'"></data>

                      <div :id="conf.key+'_input_'+k" v-for="v,k in conf.value"
                           class="form-group">
                           <input class="form-control osr-input" type="text" :value="k" />

                          <i v-on:click="remove_tag(conf.key+'_input_'+k)" class="fa fa-sm osr-pointer osr-color-danger fa fa-close pull-right osr-form-control-feedback">
                          </i>
                          <textarea class="form-control osr-input" style="height:80px;" :value="v" ></textarea>
                      </div>

                  </td>
                    <!--其他-->
                  <td width="300px" v-if="conf.value_type!='bool' && conf.value_type!='password' && conf.value_type!='list' && conf.value_type!='dict' " class="form-group" >
                      <input class="form-control osr-input" type="text" v-model="conf.value" >

                  </td>
                  <!--//编辑区域-->

                  <td width="50px">{[conf.value_type]}</td>
                  <td width="50px" v-if="conf.reactivate">
                      <i class="fa fa-circle osr-color-danger"></i>
                  </td>
                  <td width="50px" v-else>
                      <i class="fa fa-circle-o osr-color-success"></i>
                  </td>
                  <td width="250px">
                      {[conf.info]}
                  </td>

                  <td width="150px">{[conf.update_time | formatDate]}</td>
                  <td width="100px" class="form-group-sm">
                     <a v-on:click="warning_modal({msg:'{{_('确认配置无误?')}}' }, 'post_conf', conf.key, index)"  class="btn btn-sm osr-btn btn-info">
                         {{_("保存修改")}}
                     </a>
                  </td>
            </tr>
        </tbody>
    </table>
</div>

<div class="panel-body table-responsive">
    <div v-if="plugin_info.requirements_exist" class="form-group form-group-sm">
        <button v-on:click="warning_modal({msg:'{{_('确定执行安装依赖包?')}}' }, 'install_requs')"  class="btn btn-sm osr-btn btn-info">
             <i class="fa fa-refresh"></i> {{_("安装或更新插件依赖包")}}
         </button>
    </div>

     <table class="table table-hover">
        <thead>
            <tr>
                <th>{{_("主机IP")}}</th>
                <th>{{_("插件依赖包安装状态")}}</th>
                <th>{{_("时间")}}</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="result in plugin_info.require_package_install_result">

                  <td width="200px">
                      {[result.host_ip]}
                  </td>
                  <td >
                      <span v-if="result.error" class="osr-color-danger" v-else>
                          {{_("连接服务器错误")}}: {[result.error]}(请检查服务器设置, 查看端口,用户名,密码是否正确)
                          <a target="_blank" href="/osr-admin/setting/host">服务器设置</a>
                          <br>
                      </span>
                      <span v-if="result.result && result.result.length > 0" >
                        <span v-for="res in result.result">
                            {[res]}<br>
                        </span>

                      </span>
                      <span class="osr-color-danger" v-else>
                          {{_("没有成功安装需求依赖包")}}
                      </span>
                  </td>
                  <td width="150px">
                      {[result.time | formatDate]}
                  </td>
              </tr>
        </tbody>
    </table>

</div>

<script>
    function add_input_tag(conf_key){
        var id = osr_guid();
        html = '<div id="'+id+ '" class="list_dict form-group form-icon form-feedback">'
                +'<input class="form-control osr-input" type="text" placeholder="Value" /></div>';

        $("#"+conf_key+"_input_0").before(html);
    }

    function add_dict_tag(conf_key){
        var id = osr_guid();
        html = '<div id="'+id+ '" class="list_dict form-group form-icon form-feedback">'
                +'<input class="form-control osr-input" type="text" placeholder="Key:String" />'
                +'<textarea class="form-control osr-input" style="height:80px;" placeholder="Value:String or Json"  ></textarea></div>'
         $("#"+conf_key+"_add").before(html);
    }

    function remove_tag(id){
         $("#"+id).remove();
    }

</script>